<template>
  <!-- 显示用户动态 -->
  <div class="personal-event">
    <el-container>
      <el-header>
        <h1>动态</h1>
      </el-header>
      <el-container v-for="item in personalEvent?.event" :key="item.id">
        <el-aside width="40px">
          <el-avatar :src=item.user.avatarUrl />
        </el-aside>
        <el-main>

          <el-link href="./PersonalView.vue"  underline>{{ item.user.nickname }}</el-link>
          <span class="event-type">{{ getType(item) }}</span>
          <h6>
            {{ timestampToTime(item.showTime) }}
            <span class="location">{{ item.ipLocation.location }}</span>
          </h6>
          <p>{{ JSON.parse(item.json).msg }}</p>
          <!-- <el-link>{{ JSON.parse(item.json).msg.match(/n http:.*?;/\n) }}</el-link> -->
          <!-- <el-link>{{ JSON.parse(item.json).msg.match(/^http[^[]+(?=\[)/) }}</el-link> -->
            <!-- 音乐功能 -->
          <aside class="audio-aside" v-if="JSON.parse(item.json).song">
            <!-- 播放icon -->
            <el-icon class="playicon">
              <VideoPlay />
            </el-icon>
            <!-- 样式hover -->
            <div class="hoverstyle" @click="drawer = true; getSongDetails(JSON.parse(item.json)?.song?.id);" style="cursor: pointer;">
              <el-icon class="iconlogo">
                <VideoPlay />
              </el-icon>
            </div>
            <!-- 音乐图片 -->
            <img class="audio-img " :src="(JSON.parse(item.json)?.song?.album?.picUrl)" alt="">
            <!-- 音乐信息-歌曲名，作者等 -->
            <section>
              <p class="songname"  style="cursor: pointer;">
                {{ JSON.parse(item.json)?.song?.name }}
              </p>
              <p class="arist">
                  <span v-for="artist in JSON.parse(item.json)?.song?.artists" :key="artist.id">
                  {{ artist.name }} 
                  <span v-if="JSON.parse(item.json)?.song?.artists.length > 1">/</span>
                </span> 
              </p>
            </section>
          </aside>
          <el-image v-show="item?.pics?.[0]?.originUrl" :src="item?.pics?.[0]?.originUrl" lazy >
          <!-- 图片加载失败的时候，即用户没有发图片 -->
            <template #error>
              <div class="image-slot">
              </div>
            </template>
          </el-image>
          <el-divider />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getPersonalEventInterface } from '@/api/user';
import { VideoPlay } from '@element-plus/icons-vue';
import { timestampToTime } from '@/utils/date'
import { songDetailsInterface, songUrlInterface, lyricsInterface } from '@/api/artist'
import { mapMutations, mapState } from 'vuex'

export default {
  components: {
    VideoPlay
  },
  data() {
    return {
      personalEvent: '',
      personalEventType: '',
      songdetail: {},
      drawer: false,
      flag:true
    }
  },
  computed: {
    ...mapState('playListModule', ['audioInfo', 'songInfo', 'lyric']),
    // 获取动态类型 改为计算属性，这样在页面标签中，每次页面重新渲染不会都去调用一遍方法，节约性能
    getType() {
      return (arg) => {
        
        switch (arg?.info?.commentThread?.resourceInfo?.eventType) {
          case 13:
            return '分享歌单'
          case 35:
            return '分享歌单'
          case 18:
            return '分享单曲'
          case 19:
            return '分享专辑'
          case 17:
            return '分享电台节目'
          case 28:
            return '分享电台节目'
          case 22:
            return '转发'
          case 39:
            return '发布视频'
          case 41:
            return '分享视频'
          case 21:
            return '分享视频'
          default:
            return '发布动态'
        }
      }
    },
  },
  watch: {
    audioInfo: {
      handler() {
        this.songdetail = this.audioInfo
      }
    }
  },
  methods: {
    //  通过获取动态消息接口获取数据
    getPersonalEvent() {
      getPersonalEventInterface().then(res => {
        // console.log('getPersonalEvent', res)
        this.personalEvent = res
      })
    },

      // 实现播放音乐功能
    ...mapMutations('playListModule', [ 'SET_AUDIO_INFO', 'SET_SONG_INFO', 'SET_LYRIC']),
    async getSongDetails(id) {
      await songDetailsInterface({ ids:id }).then(res => {
        this.SET_SONG_INFO(res.songs[0])
      })
      songUrlInterface({ id, level: 'standard' }).then(async (res) => {
        await lyricsInterface({ id }).then(res => {
          this.SET_LYRIC(res.lrc.lyric)
          this.audioInfo.lrc = res.lrc.lyric
          // console.log('this.audioInfo.lrc', this.audioInfo.lrc);
        })
        this.SET_AUDIO_INFO({
          // 歌曲id
          id: this.id,
          // 歌名
          name: this.songInfo.name || '',
          //  作者名
          artist: this.songInfo.ar[0].name || '',
          // 音乐地址
          url: res?.data?.[0].url,
          // 音乐封面
          cover: this.songInfo.al.picUrl || '',
          // 歌词
          lrc: this.lyric || ''
        })
      })
    },
  },
  created() {
    this.getPersonalEvent();
    this.timestampToTime = timestampToTime
  }

}
</script>

<style lang="scss" scoped>
.el-header {
  display: flex;

  h1{
    font-size: 25px;
  }
}

.el-aside {
  margin-left: 20px;

  .el-avatar {
    margin-top: 6px;
  }
}

.el-main {
  padding-top: 0;
  padding-left: 10px;
  .el-link{
    justify-content: left;
    width:100px;
  };
  .event-type{
    font-size:small;
    color:#999;
  };
  h6{
    font-weight: 500;
    font-size: small;
    color: #ccc;
    margin: 10px 0;
    span{
      color: #b2b2b2;
    }
  };
  .el-image{
    width: 300px;
    height: 300px;
    margin:20px 0;
  }
  // .el-image__wrapper{
  //   width: 10px !important;
  //   height: 10px !important;
  // }
  .right-button{
    float: right;
  }
}

// 
.audio-aside{
  list-style: none;
  background-color: rgb(247, 239, 240);
  margin-top: 20px;
  width: 50%;
  display: flex;
  border-radius: 15px;
  position: relative;
  .audio-img{
    width: 70px;
    height:70px;
    border-radius: 10px;
    margin-right: 20px;
  };
  .playicon {
    width: 70px;
    height: 70px;
    position: absolute;
    font-size: 35px;
    color: rgb(236, 65, 65)
  };
  .hoverstyle {
    width: 70px;
    height: 70px;
    background-color: rgba(14, 14, 14, 0);
    position: absolute;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;

    .iconlogo {
      width: 70px;
      height: 70px;
      background-color: rgba(14, 14, 14, 0);
      color: rgb(224, 222, 222, 0);
      font-size: 40px;
      position: absolute;
      border-radius: 10px;
    };

    .iconlogo:hover {
      background-color: rgba(14, 14, 14, 0.6);
      color: rgba(224, 222, 222);
    };
  };
  section{
    display: flex;
    flex-direction: column;
    font-size: 16px;
    width: 210px;
    .songname{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      color: #999;
      margin-top: 10px
    };
    .songname:hover {
      color: rgb(236, 65, 65);
    };
    .arist{
      margin-right: 5px;
      color:#333;
      font-size: 14px;
      margin-top: 10px;
      span{
        margin-right: 5px;
      }
    };
  };
}
</style>
